<!--
 * @Author: wangding
 * @Date: 2020-11-03 09:38:48
 * @LastEditTime: 2020-11-04 12:11:52
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\device\inverter\flowModal.vue
-->
<template>
    <div>
        <el-dialog
        :title="$t('device.subscription.js_choose_sub')"
        :visible="newVisibleGroup"
        width="40%"
        @close="()=>{$store.commit('setNewVisibleGroup',false)}"
        :close-on-click-modal='false'
        >
        <div class="checkBox-main-group">
            <div class="checkBox-sub" v-for='item in groupList' :key='item.sid'>
                <el-checkbox @change='changeCheckBox(item.sid)' :checked='item.isSub == 1? true:false'>
                    <div class="hiddle-box-text" :title="item.groupName">{{item.groupName}}</div>
                </el-checkbox>
                <a href="javascript:;" class="close-href"> <i class="el-icon-close"></i> </a>
            </div>
        </div>
        <div class="addGroup-content-box">
            <div class="flag-box"><a href="javascript:;" @click='inputFlag = !inputFlag'>{{!inputFlag?$t('device.subscription.js_insert_new'):$t('device.subscription.js_pack_up')}}</a></div>
            <transition name="el-zoom-in-top">
                <div class="content-box" v-if='inputFlag'>
                    <el-form label-width="100px" >
                        <el-row :gutter="20">
                            <el-col :span="16" :offset="4">
                                <el-form-item :label="$t('device.subscription.js_subname')">
                                    <el-input style="width:160px;margin-right:10px;" v-model='newGroupName' :placeholder="$t('pleaseInput')"></el-input>
                                    <el-button type="primary" @click="deviceCheckSubName">{{$t('device.subscription.js_insert_new')}}</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </transition>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="()=>{$store.commit('setNewVisibleGroup',false)}">{{$t('cancel')}}</el-button>
            <el-button type="primary" @click="deviceUpdateSub">{{$t('sure')}}</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
import baseTable from '../../../components/common/baseTable'
export default {
    components: {
        baseTable
    },
    props: {
        groupRowData:{
            type:Object,
            default:() =>{return {}}
        }
    },
    data() {
        return {
            groupList:[],
            inputFlag:false,
            newGroupName:''
        };
    },
    computed: {
        newVisibleGroup(){
            return this.$store.state.sysStore.newVisibleGroup
        },
    },
    watch: {
        groupRowData:{
            handler(nv,ov){
                if(nv){
                    this.deviceGetSubGroupName()
                }
            }
        }
    },
    created() {

    },
    mounted() {

    },
    methods: {
        async deviceCheckSubName(){
            let res = await this.API.deviceCheckSubName({
                groupName:this.newGroupName
            })
            if(res){
                this.deviceInsertSub()
            }else{
                this.$message({
                message: this.$t('repeated'),
                type: 'warning'
                });
            }
        },
        async deviceInsertSub(){
            let res = await this.API.deviceInsertSub({
                groupName:this.newGroupName
            })
            if(res.success){
                this.$message({
                message: this.$t('index.control_success'),
                type: 'success'
                });
                this.deviceGetSubGroupName()
            }else{
                this.$message({
                message: this.$t('index.control_fail'),
                type: 'warning'
                });
            }
        },
        async deviceGetSubGroupName(){
            let res = await this.API.deviceGetSubGroupName({
                SN:this.groupRowData.SN
            })
            this.groupList = res || []
        },
        changeCheckBox(id){
            this.groupList.forEach(item =>{
                if(item.sid == id){
                    if(item.isSub == '1'){
                        item.isSub = '0'
                    }else{
                        item.isSub = '1'
                    }
                }
            })
        },
        async deviceUpdateSub(){
            let groupIds = []
            this.groupList.forEach(item => { 
                if(item.isSub == '1'){
                    groupIds.push(item.sid)
                }
            })
            let res = await this.API.deviceUpdateSub({
                SN:this.groupRowData.SN,
                groupIds:groupIds.length>0? groupIds.join(','):''
            })
            if(res.success){
                this.$message({
                message: this.$t('index.control_success'),
                type: 'success'
                });
                this.$store.commit('setNewVisibleGroup',false)
                this.$emit('uploadData',true)
            }else{
                this.$message({
                message: this.$t('index.control_fail'),
                type: 'warning'
                });
            }
        }
    },
};
</script>

<style  lang="less">
.checkBox-main-group{
    display: flex;
    flex-wrap: wrap;
    
    .checkBox-sub{
        border:1px solid #ccc;
        padding: 5px 10px 3px;
        min-width: 140px;
        border-radius: 5px;
        display: flex;
        justify-content: space-between;
        margin-right: 10px;
        margin-top:10px;
        .close-href{
            display: none;
        }
        .hiddle-box-text{
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100px;
        }
    }
    .checkBox-sub:hover{
        border:1px solid #ffc375;
        .close-href{
            display: block;
        }
    }
    .el-checkbox__inner{
        transform: translateY(-4px);
    }
}
.addGroup-content-box{
    margin-top: 20px;
    .flag-box{
        text-align: center;
        color: #ffc375;
        text-decoration:underline;
        margin-bottom: 10px;
    }
}
</style>
